<template>
  <div class="file-share-container">
    <PageHeader title="文件分享" />
    <h1 class="page-title">局域网文件分享</h1>

    <!-- 上传区域 -->
    <div class="upload-section">
      <label class="upload-btn">
        <input type="file" @change="handleFileUpload" multiple />
        <span>选择文件上传</span>
      </label>
      <p class="upload-hint">支持多文件上传，单个文件不超过100MB</p>
    </div>

    <!-- 文件列表区域 -->
    <div class="file-list-section">
      <h2 class="section-title">已上传文件</h2>
      <div v-if="uploadedFiles.length === 0" class="empty-state">
        暂无上传文件
      </div>
      <table v-else class="file-table">
        <thead>
          <tr>
            <th>文件名</th>
            <th>大小</th>
            <th>上传时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="file in uploadedFiles" :key="file.id">
            <td class="file-name">{{ file.originalFileName }}</td>
            <td>{{ formatFileSize(file.fileSize) }}</td>
            <td>{{ formatDate(file.updateTime) }}</td>
            <td>
              <button @click="downloadFile(file)" class="download-btn">
                下载
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 二维码分享区域 -->
    <div class="qr-section">
      <h2 class="section-title">局域网访问</h2>
      <div class="qr-container" style="display: flex; justify-content: center; align-items: center; height: 200px;">
        <QrcodeVue :value="shareUrl" :width=200 :height=200></QrcodeVue>
      </div>
      <p class="qr-hint">扫描二维码在局域网内访问此页面</p>
      <div class="url-display">
        <input type="text" :value="shareUrl" readonly />
        <button @click="copyUrl" class="copy-btn">复制链接</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import PageHeader from '@/components/PageHeader.vue';
import { ref, onMounted } from 'vue';
import type { FileInfo } from '@/dataType/fileType';
import { fileService } from '@/services/fileService';
import QrcodeVue from 'qrcode-vue3';

// 状态管理
const uploadedFiles = ref<FileInfo[]>([]);
const shareUrl = ref<string>(window.location.href);

// 文件上传处理
const handleFileUpload = (e: Event) => {
  const input = e.target as HTMLInputElement;
  if (!input.files) return;

  Array.from(input.files).forEach(file => {
    // 模拟上传过程
    fileService.uploadFile(file).then(res => {
      fileService.getFiles(1, 10).then(res => {
        uploadedFiles.value = res.records;
      })
    })
  });

  // 清空输入以允许重复上传相同文件
  input.value = '';
};

// 文件下载处理
const downloadFile = (file: FileInfo) => {
  // 在实际应用中，这里应该是后端提供的文件下载URL
  // const link = document.createElement('a');
  // link.href = 'http://localhost:8080/file/download/' + file.id;
  // link.download = file.originalFileName;
  // document.body.appendChild(link);
  // link.click();
  // document.body.removeChild(link);
  let fileId=file.fileName.substring(0,file.fileName.lastIndexOf('.'));
  fileService.downloadFile(fileId, file.originalFileName);
};

// 格式化文件大小
const formatFileSize = (bytes: number): string => {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
};

// 格式化日期
const formatDate = (date: Date): string => {
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 复制链接到剪贴板
const copyUrl = () => {
  navigator.clipboard.writeText(shareUrl.value).then(() => {
    alert('链接已复制到剪贴板');
  });
};

// 页面加载时初始化
onMounted(() => {
  // 加载模拟文件数据
  uploadedFiles.value = [];
  fileService.getFiles(1, 10).then(res => {
    console.log(res);
    uploadedFiles.value = res.records;
  })

  // 获取当前页面URL作为分享链接
  shareUrl.value = window.location.href;
});
</script>

<style scoped>
.file-share-container {
  width: calc(100vw - 62px);
  margin: 0 auto;
  padding: 20px;
}

.page-title {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

.upload-section {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  margin-bottom: 30px;
}

.upload-btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #1e88e5;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.upload-btn:hover {
  background-color: #1565c0;
}

.upload-btn input {
  display: none;
}

.upload-hint {
  color: #666;
  margin-top: 10px;
  font-size: 14px;
}

.file-list-section {
  margin-bottom: 30px;
}

.section-title {
  color: #333;
  border-bottom: 2px solid #42b983;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: #666;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.file-table {
  width: 100%;
  border-collapse: collapse;
}

.file-table th,
.file-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.file-table th {
  background-color: #f8f9fa;
  font-weight: bold;
  color: #333;
}

.download-btn {
  padding: 6px 12px;
  background-color: #1e88e5;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.download-btn:hover {
  background-color: #1565c0;
}

.qr-section {
  text-align: center;
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 30px;
}

.qr-container {
  display: inline-block;
  background-color: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
}

.qr-hint {
  color: #666;
  margin-bottom: 20px;
}

.url-display {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
}

.url-display input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  font-size: 14px;
}

.copy-btn {
  padding: 10px 15px;
  background-color: #1e88e5;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

@media (max-width: 768px) {
  .file-share-container {
    padding: 10px;
  }

  .upload-section,
  .qr-section {
    padding: 20px 15px;
  }

  .file-table {
    font-size: 14px;
  }

  .file-table th,
  .file-table td {
    padding: 8px 10px;
  }

  .section-title {
    font-size: 18px;
  }

  .url-display {
    flex-direction: column;
  }

  .url-display input {
    border-radius: 4px;
    margin-bottom: 10px;
  }

  .copy-btn {
    border-radius: 4px;
  }
}
</style>